<template>
  <div class="main-scroll">
    <headerc :title="title"></headerc>
    <el-card class="box-card">
      <!-- <div class="title-text">数据筛选</div> -->
      <div style="padding: 10px;" class="c-filter">
        <el-form
          :inline="true"
          :model="filterForm"
          class="demo-form-inline"
          label-width="70px"
        >
          <el-form-item label="员工姓名">
            <el-input
              v-model="filterForm.emplName"
              placeholder="员工姓名"
            ></el-input>
          </el-form-item>

          <el-form-item label="所属部门">
            <el-input
              v-model="filterForm.deptLevelName1"
              placeholder="所属部门"
            ></el-input>
          </el-form-item>

          <el-form-item label="二级部门">
            <el-input
              v-model="filterForm.deptLevelName2"
              placeholder="所属部门"
            ></el-input>
          </el-form-item>

          <el-form-item label="所属班组">
            <el-input
              v-model="filterForm.deptLevelName5"
              placeholder="所属班组"
            ></el-input>
          </el-form-item>

          <el-form-item label="发现时间">
            <el-date-picker
              v-model="filterForm.evaluationDate"
              type="daterange"
              range-separator="至"
              start-placeholder="起始日期"
              end-placeholder="截止日期"
              value-format="yyyy-MM-dd"
              @change="changeDate"
            >
            </el-date-picker>
          </el-form-item>
          <el-row>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="query"
                >查询</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="reset">清除查询条件</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card class="c-main-show">
      <!-- <div class="main-seting">
        <div>
          <div class="title-text">数据列表</div> -->
          <el-button
        v-auth="'C06002'"
        style="
          float: right;
          margin-right: 20px;
          margin-bottom: 20px;
          margin-top: 20px;
        "
        icon="el-icon-download"
        @click="exportExcel"
        >导出</el-button
      >

      <el-button
        v-auth="'C06001'"
        type="primary"
        style="
            float: right;
            margin-right: 20px;
            margin-bottom: 20px;
            margin-top: 20px;
          "
        icon="el-icon-plus"
        @click="goAdd"
        >添加</el-button
      >
      <div style="margin: 20px; min-height:55vh">
        <el-table :data="evaluateList" border style="width: 100%;" :header-cell-style="{ background: '#F6F7FB' }">
          <el-table-column
            type="index"
            :index="indexAdd"
            label="序号"
            width="50"
          >
          </el-table-column>
          <el-table-column label="一级部门">
            <template slot-scope="scope">
              <p>{{ scope.row.deptLevelName1 }}</p>
            </template>
          </el-table-column>
          <el-table-column label="二级部门">
            <template slot-scope="scope">
              <p>{{ scope.row.deptLevelName2 }}</p>
            </template>
          </el-table-column>
          <el-table-column label="班组">
            <template slot-scope="scope">
              <p>{{ scope.row.deptLevelName5 }}</p>
            </template>
          </el-table-column>
          <el-table-column label="姓名">
            <template slot-scope="scope">
              <p>{{ scope.row.creatorName }}</p>
            </template>
          </el-table-column>
          <el-table-column label="日期" width="100">
            <template slot-scope="scope">
              <p>{{ scope.row.createTime | formatDate('yyyy-MM-dd') }}</p>
            </template>
          </el-table-column>
          <el-table-column label="员工自评">
            <template slot-scope="scope">
              <p>{{ scope.row.selfEvaluation }}</p>
            </template>
          </el-table-column>
          <el-table-column label="班组长签字">
            <template slot-scope="scope">
              <p>{{ scope.row.teamLeaderName }}</p>
            </template>
          </el-table-column>
          <el-table-column label="班组长审核意见" :show-overflow-tooltip='true'>
            <template slot-scope="scope">
              <p>{{ scope.row.leaderSignOpinion }}</p>
            </template>
          </el-table-column>
          <el-table-column label="签字日期" width="100">
            <template slot-scope="scope">
              <p>{{ scope.row.leaderSignDate | formatDate('yyyy-MM-dd') }}</p>
            </template>
          </el-table-column>
          <el-table-column label="车间安全员签字">
            <template slot-scope="scope">
              <p>{{ scope.row.safetyOfficerName }}</p>
            </template>
          </el-table-column>
          <el-table-column label="安全员审核意见" :show-overflow-tooltip='true'>
            <template slot-scope="scope">
              <p>{{ scope.row.officerSignOpinion }}</p>
            </template>
          </el-table-column>
          <el-table-column label="签字日期" width="100">
            <template slot-scope="scope">
              <p>{{ scope.row.officerSignDate | formatDate('yyyy-MM-dd') }}</p>
            </template>
          </el-table-column>
          <el-table-column label="备注" :show-overflow-tooltip='true'>
            <template slot-scope="scope">
              <p>{{ scope.row.remark }}</p>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button
                v-if="row.isWho == 1 && row.teamLeaderStatus == 0"
                type="text"
                size="mini"
                @click="leaderSign(row)"
                >签字确认</el-button
              >
              <el-button
                v-if="row.isWho == 2 && row.safetyOfficerStatus == 0"
                type="text"
                size="mini"
                @click="officerSign(row)"
                >签字确认</el-button
              >
              <p v-if="row.isWho == 1 && row.teamLeaderStatus == 1">
                已签字
              </p>
              <p v-if="row.isWho == 2 && row.safetyOfficerStatus == 1">
                已签字
              </p>
              <p v-if="row.isWho == 0 && row.creatorStatus == 0">待处理</p>
              <p v-if="row.isWho == 0 && row.creatorStatus == 1">已处理</p>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        :hide-on-single-page="total < 10"
        @current-change="currentChange"
        class="pagination"
      >
      </el-pagination>
      <!-- </div>
      </div> -->
    </el-card>
    <el-dialog
      title="添加"
      :visible.sync="dialogVisible"
      @close="cancel"
      width="50%"
    >
      <el-form
        ref="createForm"
        :model="createForm"
        :rules="rules"
        label-width="200px"
      >
        <el-form-item label="日期:" prop="evaluationDate">
          <el-date-picker
            v-model="createForm.evaluationDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            @change="changeDate2"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="员工自评:" prop="selfEvaluation">
          <el-input
            v-model="createForm.selfEvaluation"
            type="textarea"
            :rows="4"
            placeholder="请填写"
            style="width: 300px;"
          ></el-input>
        </el-form-item>
        <el-form-item label="班组长签字:" prop="teamLeaderSign">
          <el-select
            v-model="createForm.teamLeaderSign"
            placeholder="请选择"
            @change="changeTeamLeader"
          >
            <el-option
              v-for="item in leaderOptions"
              :key="item.id"
              :label="item.emplName"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- <el-select
            v-model="createForm.teamLeaderSign"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="leaderRemoteMethod"
            :loading="leaderLoading"
          >
            <el-option
              v-for="item in leaderOptions"
              :key="item.value"
              :label="item.emplName"
              :value="item.id"
            >
            </el-option>
          </el-select> -->
          <!-- <el-select v-model="createForm.teamLeaderSign" placeholder="请选择">
            <el-option label="丙" value="bing"></el-option>
            <el-option label="丁" value="ding"></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="车间安全员签字:" prop="safetyOfficerSign">
          <el-select
            v-model="createForm.safetyOfficerSign"
            placeholder="请选择"
            @change="changeSafetyOfficer"
          >
            <el-option
              v-for="item in safetyOptions"
              :key="item.id"
              :label="item.emplName"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- <el-select
            v-model="createForm.safetyOfficerSign"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="safetyRemoteMethod"
            :loading="safetyLoading"
          >
            <el-option
              v-for="item in safetyOptions"
              :key="item.value"
              :label="item.emplName"
              :value="item.id"
            >
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="备注:">
          <el-input v-model="createForm.remark" placeholder="请填写"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="createEvaluate">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="signTitle"
      ref="signDialog"
      :visible.sync="signVisible"
      @close="cancelSignDialog"
    >
      <el-form :model="signForm">
        <el-form-item
          label="班组长意见"
          label-width="120px"
          v-if="isLeaderSign"
        >
          <el-input
            type="textarea"
            :rows="4"
            v-model="signForm.leaderSignOpinion"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="车间安全员意见"
          label-width="120px"
          v-if="!isLeaderSign"
        >
          <el-input
            type="textarea"
            :rows="4"
            v-model="signForm.officerSignOpinion"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSignDialog">取 消</el-button>
        <el-button v-if="isLeaderSign" type="primary" @click="addLeaderSign"
          >确 定</el-button
        >
        <el-button v-if="!isLeaderSign" type="primary" @click="addOfficerSign"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import headerc from '@/components/header.vue'
import { evaluateList, createEvaluate } from '@/api/personal-files'
import { getlist } from '@/api'
import { exportMethod } from '@/utils/utils'
import { updateEvaluate } from '@/api/personal-files'
export default {
  components: {
    headerc
  },
  data() {
    return {
      title: '员工自评',
      value1: '',
      signTitle: '班组长签字',
      signForm: {
        leaderSignOpinion: '同意',
        officerSignOpinion: '同意'
      },
      filterForm: {
        emplName: '',
        deptTypeName1: '',
        deptTypeName2: '',
        deptTypeName3: '',
        evaluationDate: ['', '']
      },
      createForm: {
        evaluationDate: '',
        selfEvaluation: '',
        teamLeaderSign: '',
        safetyOfficerSign: '',
        remark: ''
      },
      rules: {
        evaluationDate: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        selfEvaluation: [
          { required: true, message: '请填写员工自评', trigger: 'blur' }
        ],
        teamLeaderSign: [
          { required: true, message: '请选择班组长', trigger: 'change' }
        ],
        safetyOfficerSign: [
          { required: true, message: '请选择车间安全员', trigger: 'change' }
        ]
      },
      pageNo: 1, // 分页页码
      pageSize: 10, // 每页条数
      total: 0,
      evaluateList: [],
      dialogVisible: false,
      leaderLoading: false,
      safetyLoading: false,
      signVisible: false,
      leaderOptions: [],
      safetyOptions: [],
      isLeaderSign: true,
      signId: ''
    }
  },
  created() {
    this.getEvaluateList()
  },

  methods: {
    exportExcel() {
      const data = {
        deptLevelName1: this.filterForm.deptTypeName1,
        deptLevelName2: this.filterForm.deptTypeName2,
        // deptTypeName3: this.filterForm.deptTypeName3,
        deptLevelName5: this.filterForm.deptTypeName5,
        creatorName: this.filterForm.emplName,
        evaluationDateEnd: this.filterForm.evaluationDate[1],
        evaluationDateStart: this.filterForm.evaluationDate[0],
        pageNo: this.pageNo,
        pageSize: 5000
      }
      exportMethod('evaluate', data, '员工自评')
    },
    changeTeamLeader(val) {
      this.createForm.teamLeaderSign = val
    },
    changeSafetyOfficer(val) {
      this.createForm.safetyOfficerSign = val
    },

    async goAdd() {
      this.dialogVisible = true

      const leaderResult = await getlist({
        userType: '1'
      })
      const safetyResult = await getlist({
        userType: '2'
      })

      if (leaderResult.code == 200) {
        this.leaderOptions = leaderResult.data
        this.createForm.teamLeaderSign = this.leaderOptions[0].id
      }

      if (safetyResult.code == 200) {
        this.safetyOptions = safetyResult.data
        this.createForm.safetyOfficerSign = this.safetyOptions[0].id
      }
    },
    cancelSignDialog() {
      this.signVisible = false
      this.$refs.signDialog.resetFields()
    },
    async addLeaderSign() {
      const res = await updateEvaluate([
        {
          id: this.signId,
          leaderSignOpinion: this.signForm.leaderSignOpinion
        }
      ])
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '签字成功'
        })
        this.signVisible = false
        this.getEvaluateList()
      }
    },
    async addOfficerSign() {
      const res = await updateEvaluate([
        {
          id: this.signId,
          officerSignOpinion: this.signForm.officerSignOpinion
        }
      ])
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '签字成功'
        })
        this.signVisible = false
        this.getEvaluateList()
      }
    },
    async leaderSign(row) {
      this.signVisible = true
      this.isLeaderSign = true
      this.signTitle = '班组长签字'
      this.signId = row.id
    },
    async officerSign(row) {
      this.signVisible = true
      this.isLeaderSign = false
      this.signTitle = '车间安全员签字'
      this.signId = row.id
    },
    sign() {
      this.$confirm('是否确认签字?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {})
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消签字'
          })
        })
    },
    cancel() {
      this.dialogVisible = false
      this.$refs.createForm.resetFields()
      this.createForm.remark = ''
    },
    // 序号-页面切换递增
    indexAdd(index) {
      return index + 1 + (this.pageNo - 1) * this.pageSize
    },
    createEvaluate() {
      this.$refs.createForm.validate(async (valid) => {
        if (valid) {
          const res = await createEvaluate({
            evaluationDate: this.createForm.evaluationDate,
            remark: this.createForm.evaluationDate,
            selfEvaluation: this.createForm.selfEvaluation,
            safetyOfficerSign: this.createForm.safetyOfficerSign,
            teamLeaderSign: this.createForm.teamLeaderSign
          })
          if (res.code == 200) {
            this.$message({
              message: '创建成功',
              type: 'success'
            })
            this.dialogVisible = false
            this.getEvaluateList()
          }
          console.log('res', res)
        } else {
          return false
        }
      })
    },
    changeDate2(date) {
      this.createForm.evaluationDate = date
    },
    query() {
      this.getEvaluateList()
    },
    reset() {
      this.filterForm.emplName = ''
      this.filterForm.deptLevelName1 = ''
      this.filterForm.deptLevelName2 = ''
      this.filterForm.deptLevelName5 = ''
      this.filterForm.evaluationDate = ''
    },
    currentChange(pageNo) {
      this.pageNo = pageNo
      this.getEvaluateList()
    },
    changeDate(date) {
      this.filterForm.evaluationDate = date
    },
    async getEvaluateList() {
      console.log(
        'this.filterForm.evaluationDate[0]',
        this.filterForm.evaluationDate[0]
      )
      console.log(
        'this.filterForm.evaluationDate[1]',
        this.filterForm.evaluationDate[0]
      )
      const res = await evaluateList({
        deptLevelName1: this.filterForm.deptTypeName1,
        deptLevelName2: this.filterForm.deptTypeName2,
        // deptTypeName3: this.filterForm.deptTypeName3,
        deptLevelName5: '',
        creatorName: this.filterForm.emplName,
        evaluationDateEnd: this.filterForm.evaluationDate[1],
        evaluationDateStart: this.filterForm.evaluationDate[0],
        pageNo: this.pageNo,
        pageSize: this.pageSize
      })
      if (res.code == 200) {
        this.evaluateList = res.data.list
        this.total = res.data.total
      }
      // console.log('this.evaluateList', this.evaluateList)
    },
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style lang="scss" scoped>
.c-main-make {
  margin-left: 35px;
  height: 300px;
  background: #fff;
  margin-right: 35px;
  margin-bottom: 35px;
  position: relative;
  overflow: hidden;
  border: 1px #dcdee0 solid;
}
.c-main-show {
  min-height: 700px;
  background: #fff;
  margin-bottom: 35px;
  position: relative;
  overflow: hidden;
  border: 1px #dcdee0 solid;
}
.title-text {
  width: 100%;
  height: 50px;
  border-bottom: 1px #dcdee0 solid;
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', 微软雅黑, sans-serif;
  font-weight: 700;
  color: #666666;
  line-height: 50px;
  padding-left: 25px;
}
.main-scroll {
  height: 1000px;
  // overflow-y: scroll;
}
.pagination {
  display: flex;
  justify-content: end;
}
.box-card {
  margin-bottom: 20px;
}
.el-input {
  width: 250px;
}
.el-select {
  width: 250px;
}
.el-textarea {
  width: 400px;
}
</style>
